<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" size="medium" @click="$router.go(-1)">返回</el-button>
    </div>
    <el-tabs v-model="activeName" stretch class="app-container-tabs" @tab-click="handleClick">
      <el-tab-pane v-if="!isAdmin" label="自定义组" name="first">
        <span v-for="per in personalList" :key="per.id" class="attention-item">
          <p>{{ per.group_name }}</p>
          <p>
            <el-popover
              width="220"
              trigger="hover">
              <div style="text-align: center">
                <el-tag v-for="item in per.users" :key="item.id" type="primary" class="user-tag">
                  {{ item.realName }}
                </el-tag>
                <span v-if="per.users.length === 0"> 暂无组员 </span>
              </div>
              <i slot="reference" class="el-icon-view"> 组员</i>
            </el-popover>
            <!--<i :class="per.state ? 'el-icon-star-on' : 'el-icon-star-off'" @click="careCustomGroup(per)"> 未关注</i>-->
          </p>
        </span>
      </el-tab-pane>
      <el-tab-pane label="全局组" name="second">
        <span v-for="com in commonList" :key="com.id" class="attention-item">
          <p>{{ com.group_name }}</p>
          <p>
            <el-popover
              width="220"
              trigger="hover">
              <div style="text-align: center">
                <el-tag v-for="item in com.users" :key="item.id" type="primary" class="user-tag">
                  {{ item.realName }}
                </el-tag>
                <span v-if="com.users.length === 0"> 暂无组员 </span>
              </div>
              <i slot="reference" class="el-icon-view"> 组员</i>
            </el-popover>
            <i :class="com.concern ? 'el-icon-star-on' : 'el-icon-star-off'" @click="careCustomGroup(com)">{{ com.concern ? ' 已关注' : ' 未关注' }}</i>
          </p>
        </span>
      </el-tab-pane>
      <el-tab-pane label="部门" name="third">
        <span v-for="dept in deptList" :key="dept.department" class="attention-item">
          <p>{{ dept.department }}</p>
          <p>
            <!--<i slot="reference" class="el-icon-view"> 人员</i>-->
            <i :class="dept.concern ? 'el-icon-star-on' : 'el-icon-star-off'" @click="careDept(dept)">{{ dept.concern ? ' 已关注' : ' 未关注' }}</i>
          </p>
        </span>
      </el-tab-pane>
      <el-tab-pane label="用户" name="fourth">
        <div class="filter-container">
          <el-input v-model="searchUsers.data.username" size="medium" placeholder="用户名" class="global-search-box"/>
          <el-input v-model="searchUsers.data.real_name" size="medium" placeholder="真实姓名" class="global-search-box"/>
          <el-select v-model="searchUsers.data.department" clearable placeholder="请选择部门" size="medium" class="global-search-box">
            <el-option
              v-for="item in deptList"
              :key="item.department"
              :label="item.department"
              :value="item.department"/>
          </el-select>
          <el-button type="primary" size="medium" icon="el-icon-search" @click="getUserList()">搜索</el-button>
        </div>
        <span v-for="user in userList" :key="user.id" class="attention-item">
          <p>{{ user.real_name }}</p>
          <p>
            <i :class="user.concern ? 'el-icon-star-on' : 'el-icon-star-off'" @click="careUser(user)">{{ user.concern ? ' 已关注' : ' 未关注' }}</i>
          </p>
        </span>
        <div class="global-paging">
          <el-pagination
            :page-size="20"
            :total="total"
            :page-sizes="[10, 20, 30, 40, 100]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import commonApi from '@/api/commonApi'
import { mapGetters } from 'vuex'
export default {
  name: 'MaintainAttention',
  data() {
    return {
      activeName: 'second',
      listLoading: false,
      personalList: null,
      commonList: null,
      deptList: null,
      userList: null,
      searchUsers: {
        currentNo: 1,
        pageSize: 20,
        data: {
          username: null,
          real_name: null,
          department: null
        }
      },
      total: null
    }
  },
  computed: {
    ...mapGetters(['isAdmin'])
  },
  created() {
    this.getPersonalList()
    this.getCommonList()
    this.getDeptList()
    this.getUserList()
  },
  methods: {
    getPersonalList() {
      this.listLoading = true
      commonApi('/userGroup/queryMyGroup', 'get').then(response => {
        this.personalList = response.data
        this.listLoading = false
      })
    },
    getCommonList() {
      this.listLoading = true
      commonApi('/userGroup/queryPublicGroup', 'get').then(response => {
        this.commonList = response.data
        this.listLoading = false
      })
    },
    getDeptList() {
      this.listLoading = true
      commonApi('/userGroup/getDeptInfo', 'get').then(response => {
        this.deptList = response.data
        this.listLoading = false
      })
    },
    getUserList() {
      this.listLoading = true
      commonApi('/userGroup/userInfo', 'post', this.searchUsers).then(response => {
        if (response.code === 1) {
          this.userList = response.data.rows
          this.total = response.data.total
          this.listLoading = false
        }
      })
    },
    careCustomGroup(obj) {
      if (obj.concern) {
        commonApi('/userGroup/cancelGroupConcern', 'post', { group_id: obj.id }).then(response => {
          if (response.code === 1) {
            obj.concern = false
            this.$message({
              message: `取消关注自定义组: ${obj.group_name}`,
              type: 'warning'
            })
          }
        })
      } else {
        commonApi('/userGroup/userGroupConcern', 'post', { group_id: obj.id }).then(response => {
          if (response.code === 1) {
            obj.concern = true
            this.$message({
              message: `成功关注自定义组: ${obj.group_name}`,
              type: 'success'
            })
          }
        })
      }
    },
    careDept(dept) {
      if (dept.concern) {
        commonApi('/userGroup/cancelDeptConcern', 'post', { department: dept.department }).then(response => {
          if (response.code === 1) {
            dept.concern = false
            this.$message({
              message: `取消关注部门: ${dept.department}`,
              type: 'warning'
            })
          }
        })
      } else {
        commonApi('/userGroup/deptConcern', 'post', { department: dept.department }).then(response => {
          if (response.code === 1) {
            dept.concern = true
            this.$message({
              message: `成功关注部门: ${dept.department}`,
              type: 'success'
            })
          }
        })
      }
    },
    careUser(user) {
      if (user.concern) {
        commonApi('/userGroup/cancelUserConcern', 'post', { concern_id: user.id }).then(response => {
          if (response.code === 1) {
            user.concern = false
            this.$message({
              message: `取消关注用户: ${user.real_name}`,
              type: 'warning'
            })
          }
        })
      } else {
        commonApi('/userGroup/userConcern', 'post', { concern_id: user.id }).then(response => {
          if (response.code === 1) {
            user.concern = true
            this.$message({
              message: `成功关注用户: ${user.real_name}`,
              type: 'success'
            })
          }
        })
      }
    },
    handleCurrentChange(val) {
      this.searchUsers.currentNo = val
      this.getUserList()
    },
    handleSizeChange(val) {
      this.searchUsers.pageSize = val
      this.getUserList()
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
  .attention-item{
    display: inline-block;
    width: 220px;
    height: 90px;
    margin: 0 15px 10px 0;
    border: 1px solid rgba(0, 0, 0, 0.17);
    border-radius: 5px;
    text-align: center;
    &:hover{
      box-shadow: 5px 5px 5px #d3dce6;
      border-color: #409EFF;
    }
  }
  .el-icon-star-on,
  .el-icon-star-off{
    margin-left: 10px;
    cursor: pointer;
    &:hover{
      color: #409EFF;
    }
  }
  .el-icon-star-on{
    color: #409EFF;
  }
  .el-icon-view{
    cursor: pointer;
    &:hover{
      color: #409EFF;
    }
  }
  .app-container-tabs{
    background-color: white;
    padding: 0 15px;
  }
  .user-tag{
    margin: 0 5px 5px 0;
  }
</style>
